<template>
	<view>
		<view v-if="item.list.length" class="womarket-wrap" :style="[getWrapStyle]">
			<WoMaketCardsItem
				:style="[getStyles(item.attrs)]"
				v-for="(cardInfo,index) in item.list"
				:key="index"
				:attrs="item.attrs"
				:cardInfo="cardInfo">
			</WoMaketCardsItem>
		</view>
		<u-empty v-else />
	</view>
</template>

<script>
	import WoMaketCardsItem from './cardItem.vue'
	export default {
		name: 'WoMaketCards',
		components:{
			WoMaketCardsItem
		},
		props:{
			item:{
				type: Object,
				default: ()=> {}
			}
		},
		computed:{
			getWrapStyle() {
			  return {
					padding: `${this.$unit(this.item?.styles.negativeMarginBottom)} ${this.$unit(this.item?.styles.pagePadding)}`
			  };
			}
		},

		methods: {
			getStyles(attrs){
				const {listModel} = attrs
				return {
					width: listModel==='oneCols'? '100%':'50%',
					backgroundImage: `linear-gradient(180deg, ${this.cardInfo?.cardBgColor}, #fff 20%)`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.womarket-wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
</style>
